<template>
  <el-row>
    <el-col :span="24">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
          <a href="/">用户管理</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
    <el-col :span="24">
      <el-table :data="userList" stripe border style="width: 70%">
        <el-table-column prop="id" label="编号" width="100" />
        <el-table-column prop="username" label="用户名" width="180" />
        <el-table-column prop="email" label="电子邮箱" width="260" />
        <el-table-column prop="phone" label="联系方式" width="180" />
        <el-table-column prop="role" label="角色" width="180">
          <template #default="scope">
            <el-tag v-if="scope.row.role == 0" type="info" effect="dark" round>管理员</el-tag>
            <el-tag v-if="scope.row.role == 1" type="success" effect="plain" round>普通用户</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="updateTime" label="更新时间" />
      </el-table>
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="navPageNums"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </el-col>
  </el-row>
</template>
<script>
import {find} from "../../api/adminUser.js";
import {getCurrentInstance,onMounted} from "vue";

export default {
  name:'UserList'
  ,data(){
    return {
      userList:[
        {
          "id": 1,
          "username": "admin",
          "email": "admin@happymall.com",
          "phone": "13800138000",
          "role": 0,
          "createTime": "2016-11-06",
          "updateTime": "2017-04-04",
        },
        {
          "id": 1,
          "username": "admin",
          "email": "admin@happymall.com",
          "phone": "13800138000",
          "role": 1,
          "createTime": "2016-11-06",
          "updateTime": "2017-04-04",
        }
      ]
      ,currentPage:1
      ,pageSize:2
      ,total:1
      ,navPageNums:[]
    }
  }
  ,methods:{
    handleSizeChange(index){
      // 改变页大小触发的事件
      // console.log(index)
      this.pageSize = index
      this.loadData();
    }
    ,handleCurrentChange(index){
      // 改变当前页触发的事件
      // console.log(index)
      this.currentPage = index;
      this.loadData();
    }
    ,async loadData(){
      let {data:ret} = await find(this.currentPage,this.pageSize)
      this.userList = ret['data']['list']
      this.total = ret['data']['total']
      this.navPageNums = ret['data']['navigatepageNums']

    }
  }
  ,setup(){
    let {ctx:ctx} = getCurrentInstance();
    onMounted(()=>{
      ctx.loadData()
    })
  }
}
</script>
<style scoped>
.el-breadcrumb{
  margin: 20px;
}
.el-pagination{
  margin-top: 20px;
}
</style>